{% extends 'layout/basic.html' %}

{% block title %}
    首页
{% endblock %}
{% block content %}
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
        {% load static %}
        <script src="{% static '/js/echarts.min.js' %}"></script>
    </head>
    <body>

    <div class="ECharts">
        <div style="display: flex;justify-content: center">
            <div id="stock1" class="stock1"></div>
        </div>
        <div style="display: flex;justify-content: center">
            <div id="contrast1" class="contrast1"></div>
        </div>
        <div style="display: flex;justify-content: center">
            <div id="change1" class="change1"></div>
        </div>
        <div style="display: flex;justify-content: center">
            <div id="stock2" class="stock2"></div>
        </div>
        <div style="display: flex;justify-content: center">
            <div id="contrast2" class="contrast2"></div>
        </div>
        <div style="display: flex;justify-content: center">
            <div id="change2" class="change2"></div>
        </div>
    </div>
    <style>
        .ECharts {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 15px;
        }

        .stock1, .stock2 {
            width: 480px;
            height: 300px;
            margin-top: 20px;
        }

        .contrast1, .contrast2 {
            width: 480px;
            height: 300px;
            margin-top: 20px;
        }

        .change1, .change2 {
            width: 480px;
            height: 300px;
            margin-top: 20px;
        }

        .stock1, .stock2, .contrast1, .contrast2, .change1, .change2 {
            border: 1px solid #5e5e5e;
            border-radius: 10px;
            transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
            transform-style: preserve-3d !important;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) !important;
        }

        .stock1:hover, .stock2:hover, .contrast1:hover, .contrast2:hover, .change1:hover, .change2:hover {
            box-shadow: 0 0 25px rgba(0, 0, 0, 0.4) !important;
        }

    </style>


    <script>
        var myChart = echarts.init(document.getElementById('stock1'));
        var option = {
            title: {
                text: '用品存量统计图'
            },
            tooltip: {},
            legend: {
                data: ['存量']
            },
            xAxis: {
                data: {{ commodity_list.name1|safe }}
            },
            yAxis: {},
            series: [{
                name: '存量',
                type: 'bar',
                data:  {{ commodity_list.stock1 }}
            }]
        };
        myChart.setOption(option);

        var chartDom = document.getElementById('contrast1');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
             title: {
                text: '用品对比图'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    // Use axis to trigger tooltip
                    type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                }
            },
            legend: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: {{ commodity_list.name1|safe }}
            },
            series: [
                {
                    name: '销售量',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: {{ commodity_list.buy1|safe }}
                },
                {
                    name: '收藏量',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: {{ commodity_list.stars1|safe }}
                },
                {
                    name: '浏览量',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: {{ commodity_list.views1|safe }}
                },

            ]
        };


        option && myChart.setOption(option);

        var myChart = echarts.init(document.getElementById('change1'));
        var option = {
            title: {
                text: '食品总销量变化图',
                left: 'right'
            },
            xAxis: {
                   data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                show:  false,
                type: 'value'
            },
            series: [
                {
                    data: {{ transaction_list.transaction1|safe }},
                    type: 'line'
                }
            ]
        };

        option && myChart.setOption(option);

        var myChart = echarts.init(document.getElementById('stock2'));
        var option = {
            title: {
                text: '食品存量统计图'
            },
            tooltip: {},
            legend: {
                data: ['存量']
            },
            xAxis: {
                data: {{ commodity_list.name2|safe }}
            },
            yAxis: {},
            series: [{
                name: '存量',
                type: 'bar',
                data:  {{ commodity_list.stock2 }}
            }]
        };
        myChart.setOption(option);


        var chartDom = document.getElementById('contrast2');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
             title: {
                text: '食品对比图'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    // Use axis to trigger tooltip
                    type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                }
            },
            legend: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: {{ commodity_list.name2|safe }}
            },
            series: [
                {
                    name: '销售量',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: {{ commodity_list.buy2|safe }}
                },
                {
                    name: '收藏量',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: {{ commodity_list.stars2|safe }}
                },
                {
                    name: '浏览量',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: {{ commodity_list.views2|safe }}
                },

            ]
        };

        option && myChart.setOption(option);

        var myChart = echarts.init(document.getElementById('change2'));
        var option = {
            title: {
                text: '食品总销量变化图',
                left: 'right'
            },
            xAxis: {
                 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value',
                show: false
            },
            series: [
                {
                    data: {{ transaction_list.transaction2|safe }},
                    type: 'line'
                }
            ]
        };

        option && myChart.setOption(option);

    </script>


    </body>

    </html>
{% endblock %}